<template>
	<view class="userInfo" >
		<u-navbar  back-text=" " :title-color="style.color5" :background="{background:style.color2}" :title-size="30" :title-width="400" :title="title"></u-navbar>
		<view class="user_head_img">
			<view class="img_icon_box">
				  <u-image @click="seeInfo(userInfo.pic)" shape="circle" width="200rpx" height="200rpx" :src="userInfo.pic?userInfo.pic:'../../static/inde_png/index_icon_19.png'"></u-image>
				<button  @click="chooseImage" class="edit" >
					<image src="../../static/inde_png/index_icon_20.png" style="width: 64rpx; height: 64rpx;"></image>
				</button> 
			</view>
		</view>
		<view class="" style="padding:0 32rpx;box-sizing: border-box;width: 100%;">
			<view class="other_info">
				<view class="other_info_item" @click="nameSHow = true">
					<span class="other_info_item_title">昵称</span>
					<view class="other_info_item_right">
						<span class="connect_input" >{{userInfo.nickname}}</span>
						<u-icon name="arrow-right" class="right" color="#909090" size="27"></u-icon>
					</view>
				</view>
				<view class="other_info_item" style="border: none;" @click="phoneSHow = true">
					<span class="other_info_item_title">手机号</span>
					<view class="other_info_item_right">
					 <span class="connect_input" >{{userInfo.mobile}}</span>
					 <u-icon name="arrow-right" class="right" color="#909090" size="27"></u-icon>
					</view>
				</view>
				<view class="other_info_item" style="border: none;" @click="EmailShow = true">
					<span class="other_info_item_title">邮箱</span>
					<view class="other_info_item_right">
						<span class="connect_input" >{{userInfo.email}}</span>
						<u-icon name="arrow-right" class="right" color="#909090" size="27"></u-icon>
					</view>
				</view>
				<view class="other_info_item" style="border: none;" @click="passwordSHow = true">
					<span class="other_info_item_title">修改密码</span>
					<u-icon name="arrow-right" class="right" color="#909090" size="27"></u-icon>
				</view>
			</view>	
		</view>
		<view  class="button_submit2" style="padding:0rpx 66rpx;">
			<u-button @click="onlogOut()" class="btns2" :custom-style="{'background':style.color1 ,color:'#fff'}"   :hair-line="false" :ripple="true" ripple-bg-color="rgba(9, 82, 200, 0.15)">退出登录</u-button>
		</view>
		<!-- 手机号修改 -->
		<u-popup border-radius="25" v-model="phoneSHow" mode="bottom">
			<view class="popbox">
				<u-field v-model="noewPhone" label="新手机号" placeholder="请输入新手机号" type="number">
					<u-button size="mini" slot="right" :disabled="disabled" @click="getCode" type="success">{{ btn_text }}</u-button>
				</u-field>
				<u-field v-model="phonecode" label="验证码" type="number" placeholder="请输入验证码"></u-field>
		
				<view class="btn_box"  @click="submit('mobile')">
					<!--  -->
					<view class="lotOut_btn" :style="{background:style.color1}">确认修改</view>
				</view>
			</view>
		</u-popup>
		<!-- 邮箱弹出层 -->
		<u-popup border-radius="25" v-model="EmailShow" mode="bottom">
			<view class="popbox">
				<u-field label="新邮箱" v-model="nowemail" placeholder="请输入新邮箱" type="text">
					<u-button size="mini" slot="right" :disabled="disabled" @click="getEmailCode" type="success">{{ btn_text }}</u-button>
				</u-field>
				<u-field v-model="emailcode" label="验证码" type="number" placeholder="请输入验证码"></u-field>
				<view class="btn_box" @click="submit('email')">
					<view :style="{background:style.color1}" class="lotOut_btn">确认修改</view>
				</view>
			</view>
		</u-popup>
		<!-- 修改用户名 -->
		<u-popup border-radius="25" v-model="nameSHow" mode="bottom">
			<view class="popbox">
				<u-field v-model="nick_name" label="用户昵称" placeholder="请输入用户昵称"></u-field>
				<view class="btn_box">
					<view class="lotOut_btn" :style="{background:style.color1}" @click="submit('nickname')">确认修改</view>
				</view>
			</view>
		</u-popup>
		<!-- 密码修改 -->
		<u-popup border-radius="25" v-model="passwordSHow" mode="bottom">
			<view class="popbox">
				<u-field v-model="editPassword.email" label="手机号/邮箱" label-width="170"  placeholder="请输入手机号/邮箱">
					<u-button :disabled="disabled_email" size="mini" slot="right" @click="getEmailCode2" type="success">{{ btn_text_phone }}</u-button>
				</u-field>
				<u-field v-model="editPassword.code" label="验证码" label-width="170"  placeholder="请输入验证码"></u-field>
				<u-field type="password" v-model="editPassword.password" label="新密码" label-width="170"  placeholder="请输入新密码"></u-field>
				<u-field type="password" v-model="editPassword.password_copy" label="确认密码" label-width="170"  placeholder="请输入确认密码"></u-field>
				<view class="btn_box">
					<view class="lotOut_btn" :style="{background:style.color1}" @click="submit('password')">确认修改</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>
<script>
	import config from "@/config/index.js";
	const {baseUrl , imgUrl} = config;
	export default {
		data() {
			return {
				noewemail:'',
				nowemail:'',
				EmailShow:false,
				emailcode:'',
				title:'用户资料',
				Padding:'33px',
				userInfo:{},
				kor_type:'',
				passwordSHow:false,
				nameSHow:false,
				phoneSHow:false,
				noewPhone:null, //新手机号
				phonecode:null , //更改手机号验证码
				disabled:false,
				btn_text: `获取验证码`,
				btn_text_phone:`获取验证码`,
				time:null,
				times: 120,
				time_email: null,
				times_email:120,
				disabled_email:false,
				nick_name:'',
				editPassword:{
					"email": "",
					"code": "" ,
					password:'',
					password_copy:'',
					style:{}
				},
			}
		},
		onLoad() {
			this.kor_type = uni.getStorageSync('kor_type')?uni.getStorageSync('kor_type'):''
			const res = uni.getSystemInfoSync()
			this.Padding = res.statusBarHeight+'px'
			this.getInfo()
			var style =  uni.getStorageSync('style')
			style = JSON.parse(style)
			this.style = style
		},
		methods: {
			submit(type){
				
				if(type == 'mobile'){
					// console.log('手机号修改')
					this.editPhone()
				}
				if(type == 'email'){
					this.editEmail()
				}
				if(type == 'password'){
					// console.log('密码修改')
					this.EditPassword()
				}
				if(type == 'nickname'){
					// console.log('昵称修改')
					this.modifyNickName()
				}
			},
			editPhone(){
				if(!this.noewPhone){
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					});
					return
				}
				if(!this.phonecode){
					uni.showToast({
						title: '验证码不能为空',
						icon: 'none'
					});
					return
				}
				var data = {
					"new_mobile": this.noewPhone, 
					"sms_code":this.phonecode //短信验证码
				}
				console.log(data)
				this.$gugoApi.changeMobile(data).then(res=>{
					this.getInfo()
					uni.showToast({
						title:'修改成功',
						icon:'none'
					})
					this.phoneSHow = false
				})
				// changeMobile
			},
			onlogOut(){
				uni.showModal({
				    title: '提示',
				    content: '是否确认退出登录?',
				    success: function (res) {
				        if (res.confirm) {
				           uni.setStorageSync('token' , '')
						   const redirectUri = encodeURIComponent(window.location.origin);
						   // window.location.replace('https://qiudaoyu.xikawa.net/')
						   
				           uni.switchTab({
				           	url:'/pages/index/index'
				           })
				        }
				    }
				});
				
			},
			// 修改邮箱
			editEmail(){
				// changeEmail
				const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
				if(!this.nowemail){
					uni.showToast({
						title: '请输入邮箱',
						icon: 'none'
					});
					return
				}
				if(!this.emailcode){
					uni.showToast({
						title: '验证码不能为空',
						icon: 'none'
					});
					return
				}
				if(!emailRegex.test(this.nowemail)){
					uni.showToast({
						title:'请输入正确的邮箱',
						icon:'none'
					})
					return
				}
				var data = {
					"new_email": this.nowemail, 
					"sms_code":this.emailcode //短信验证码
				}
				this.$gugoApi.changeEmail(data).then(res=>{
					uni.showToast({
						title:"修改成功",
						icon:'none'
					})
					this.getInfo()
					this.EmailShow = false
				})
				
				
			},
			// 修改昵称
			modifyNickName() {
				this.userInfo.nickname =  this.nick_name
				this.onSubmit()
				this.nameSHow = false
			},
			// 修改密码
			EditPassword(){
				if (this.editPassword.email == '') {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					});
					return;
				}
				if (this.editPassword.code == '') {
					uni.showToast({
						title: '验证码不能为空',
						icon: 'none'
					});
					return;
				}
				if (this.editPassword.password != this.editPassword.password_copy) {
					uni.showToast({
						title: '两次密码输入不一致',
						icon: 'none'
					});
					return;
				}
				var data = {
					"mobile": this.editPassword.email,
					"sms_code": this.editPassword.code ,
					"password":this.editPassword.password
				}
				this.$gugoApi.changePwd(data).then(res=>{
					uni.showToast({
						title:'修改成功,请重新登录',
						icon:'none'
					})
					this.passwordSHow=false
					this.editPassword.email = ''
					this.editPassword.code = ''
					this.editPassword.password = ''
					this.editPassword.password_copy = ''
					uni.setStorageSync('token' , '')
					setTimeout(()=>{
						uni.navigateTo({
							url:'/pages/login/login'
						})
					},1500)
				}).catch(err=>{
					// console.log(err)
					uni.showToast({
						title:err.data.message,
						icon:'none'
					})
				})
				// console.log(data)
			},
			getCode() {
				// 获取手机验证码
				var data = {
					mobile: this.noewPhone,
					type:"changemobile"
				};
				if (this.noewPhone == null || this.noewPhone == '') {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					});
					return;
				}
				var phoneRegex = /^[1][123456789][0-9]{9}$/;
				if(!phoneRegex.test(this.noewPhone)){
					uni.showToast({
						title:'请输入正确的手机号',
						icon:'none'
					})
					return
				}
				this.time = setInterval(() => {
					this.times -= 1;
					if (this.times == 0) {
						this.disabled = false;
						this.btn_text = `获取验证码`;
						clearInterval(this.time);
						this.time = null;
						this.times = 120;
					} else {
						this.disabled = true;
						this.btn_text = `${this.times}s后再次获取`;
					}
				}, 1000);
				this.$gugoApi
					.sendSmsCode(data)
					.then((res) => {
						uni.showToast({
							title: '发送成功',
							icon: 'success'
						});
						
					})
					.catch((err) => {
						uni.showToast({
							title: err.data.message,
							icon: 'none'
						});
					});
			},
			getEmailCode(){
				// 获取邮箱验证码
				var data = {
					email: this.nowemail,
					type:"changeemail"
				};
				if (this.nowemail == null || this.nowemail == '') {
					uni.showToast({
						title: '请输入邮箱',
						icon: 'none'
					});
					return;
				}
				const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
				if(!emailRegex.test(this.nowemail)){
					uni.showToast({
						title:'请输入正确的邮箱',
						icon:'none'
					})
					return
				}
				this.time = setInterval(() => {
					this.times -= 1;
					if (this.times == 0) {
						this.disabled = false;
						this.btn_text = `获取验证码`;
						clearInterval(this.time);
						this.time = null;
						this.times = 120;
					} else {
						this.disabled = true;
						this.btn_text = `${this.times}s后再次获取`;
					}
				}, 1000);
				this.$gugoApi
					.post_email(data)
					.then((res) => {
						uni.showToast({
							title: '发送成功',
							icon: 'success'
						});
						
					})
					.catch((err) => {
						uni.showToast({
							title: err.data.message,
							icon: 'none'
						});
					});
			},
			getEmailCode2() {
				// 获取邮箱验证码
				var data = {
					mobile: this.editPassword.email,
					email:this.editPassword.email,
					type:'changepwd'
				};
				if (this.editPassword.email == '') {
					uni.showToast({
						title: '请输入手机号或邮箱',
						icon: 'none'
					});
					return;
				}
				var isEmail = false
				var phoneRegex = /^[1][123456789][0-9]{9}$/;
				if (this.editPassword.email.includes("@")) {
					isEmail = true
					const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
					if(!emailRegex.test(this.editPassword.email)){
						uni.showToast({
							title:'请输入正确的邮箱',
							icon:'none'
						})
						return
					}
				}else{
					isEmail = false
					if(!phoneRegex.test(this.editPassword.email)){
						uni.showToast({
							title:'请输入正确的手机号',
							icon:'none'
						})
						return
					}
				}
				
				if(isEmail){
					delete data.mobile
					this.sendEmailCode(data)
				}else{
					delete data.email
					this.sendSmsCode3(data)
				}
				// console.log(data)
			},
			sendEmailCode(data){
				this.$gugoApi.post_email(data).then(res=>{
					this.times_email -= 1;
					if (this.times_email == 0) {
						this.disabled_email = false;
						this.btn_text_phone = `获取验证码`;
						clearInterval(this.time_email);
						this.disabled_email = null;
						this.times_email = 120;
					} else {
						this.disabled_email = true;
						this.btn_text_phone = `${this.times_email}s后再次获取`;
					}
				}).catch(error=>{
					uni.showToast({
						title:'验证码发送失败',
						icon:'error'
					})
				})
			},
			sendSmsCode3(data){
				this.$gugoApi.sendSmsCode(data).then(res=>{
					this.times_email -= 1;
					if (this.times_email == 0) {
						this.disabled_email = false;
						this.btn_text_phone = `获取验证码`;
						clearInterval(this.time_email);
						this.disabled_email = null;
						this.times_email = 120;
					} else {
						this.disabled_email = true;
						this.btn_text_phone = `${this.times_email}s后再次获取`;
					}
				}).catch(error=>{
					uni.showToast({
						title:'验证码发送失败',
						icon:'error'
					})
				})
			},
			chooseImage(){
				uni.chooseImage({
					sizeType:'compressed',
					count:1,
					success: (file) => {
						 var tempFilePaths = file.tempFilePaths;
						 uni.showLoading({
						 	title:'上传中',
							mask:true
						 })
						 uni.uploadFile({
						 	url: baseUrl+'index/index/file', // 后端给的接口地址
						 	type: 'POST',
						 	filePath: tempFilePaths[0],// 本地文件地址
						 	name: 'file',// 传给后端时二进制文件的key
						 	header: {
								// #ifdef MP-WEIXIN
									'content-type':'multipart/form-data', // 必须添加
								// #endif
						 	},
						 	success: (res) => {
								uni.hideLoading()
								var url = imgUrl+res.data
								var Urls = url.replace(/\\/g , '/')
								this.userInfo.pic = Urls	
								this.onSubmit()
						 	},
						 	fail(err) {
								// console.log(err)
								uni.hideLoading()
								uni.showToast({
									title:'上传失败,请重试!',
									icon:'none'
								})
						 	}
						 }); 
					}
				});
				
			},
			back(){
				uni.navigateBack()
			},
			seeInfo(url) {
				// 查看图片
				
				if(url){
					uni.showLoading({
						title: '加载中'
					});
					uni.previewImage({
						urls: [url],
						complete: () => {
							uni.hideLoading();
						}
					});
				}
				
			},
			onChangeNickname (e) {
			　　var getNickName = e.detail.value
			　　if (getNickName) {
			　　　　this.userInfo.nickname = getNickName
			　　}
			},
			checkMobile(mobile){ 
			    
			    if(mobile.length<11){ 
			        return false; 
			    } 
			},
			onSubmit(){
				// 用户信息修改
				if(!(this.userInfo.mobile || this.userInfo.email)){
					uni.showToast({
						title:'请输入手机号',
						icon:'none'
					})
					return
				}
				if(this.userInfo.mobile){
					if(this.userInfo.mobile.length<11){
						uni.showToast({
							title:'请输入正确的手机号',
							icon:'none'
						})
						return
					}
				}
				if(!this.userInfo.nickname){	
					uni.showToast({
						title:'昵称不能为空',
						icon:'none'
					})
					return
				}
				this.userInfo.perfect=1
				this.$wqzApi.user_update(this.userInfo).then(res=>{
					uni.showToast({
						title:'修改成功',
						icon:'none'
					})
					this.getInfo()
				})
				
			},
			getInfo(){
				var data = {}
				this.$wqzApi.user_index(data).then(res=>{
					this.userInfo = res.data
				})
				
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import url(./index.scss);
</style>
